
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TensorFlow.js 示例中心</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-gray-50">
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-center mb-8 bg-gradient-to-r from-blue-500 to-purple-600 text-transparent bg-clip-text">TensorFlow.js 示例</h1>
    
    <div class="grid md:grid-cols-2 gap-8">
      <!-- MNIST 识别模块 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 hover:shadow-lg transition-shadow">
        <h2 class="text-xl font-semibold mb-4">MNIST 手写数字识别</h2>
        <div class="mb-4">
          <canvas id="mnist-canvas" width="280" height="280" class="border rounded-md bg-black"></canvas>
        </div>
        <div class="flex space-x-4">
          <button id="predict-btn" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">识别</button>
          <button id="clear-btn" class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 transition">清除</button>
        </div>
        <div id="mnist-result" class="mt-4 text-lg font-medium"></div>
      </div>

      <!-- 线性回归模块 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 hover:shadow-lg transition-shadow">
        <h2 class="text-xl font-semibold mb-4">线性回归演示</h2>
        <canvas id="regression-plot" width="400" height="300" class="mb-4"></canvas>
        <button id="train-btn" class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition">开始训练</button>
        <div id="regression-result" class="mt-4"></div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.18.0/dist/tf.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="tf.min.js"></script>
  <script src="chart.js"></script>
  <script src="app.js"></script>
</body>
</html>
